<template>
  <div class="bg-white">
    <div class="common-card">
      <dc-cell class="main-title" title="客流情况" :to="'/passenger'" value="详情" sVal="true" isLink></dc-cell>
      <dc-row class="pt40 pb40 mid1px" type="flex" justify="center">
        <dc-col class="card-data" span="7">
          <span class="num">{{pasStuCrmData.todayFlow}}</span>
          <span class="label">今日客流</span>
        </dc-col>
        <dc-col class="card-data" span="7">
          <span class="num">{{pasStuCrmData.peopleAvgConsume}}</span>
          <span class="label">人均消费</span>
        </dc-col>
        <dc-col class="card-data" span="7">
          <span class="num">{{pasStuCrmData.newMemberNum}}</span>
          <span class="label">新增会员</span>
        </dc-col>
      </dc-row>
      <div class="sub-title">消费分布</div>
      <div class="common-chart mix1px" id="payRing"></div>
      <div class="sub-title">明星顾客</div>
      <dc-row type="flex" justify="space-around" align="middle" class="passenger-star">
        <dc-col span="14" class="text-left startDetail">
          <span style="position: relative; display: inline-block">
            <img class="avatar mr12" style="display: inline-block;" alt=""
                 :src="pasStuCrmData.imageUrl || 'static/icon-start-guest.png'"/>
            <em class="crown" style="background-image: url(static/top1.png)"></em>
          </span>
          <span class="num ml15">{{pasStuCrmData.startCustomerName || '暂无'}}</span>
        </dc-col>
        <dc-col span="8" class="startDetail text-right">
          <span class="num">累计来店{{pasStuCrmData.startCustomerNum}}次</span>
        </dc-col>
      </dc-row>
      <!--<dc-cell class="no-border" :title='pasStuCrmData.startCustomerName || "暂无"' :value="'累计来店'+pasStuCrmData.startCustomerNum+'次'" bVal="true"-->
               <!--:img="pasStuCrmData.imageUrl || 'static/icon-start-guest.png'">-->
      <!--</dc-cell>-->

    </div>
    <!--<div class="common-card bg-white mt20">-->
      <!--<dc-cell title="客流情况(无crm)" :to="'/passenger'" value="详情" sVal="true" isLink></dc-cell>-->

      <!--<dc-row class="pt40 pb40" type="flex" justify="space-around">-->
        <!--<dc-col class="card-data" span="6">-->
          <!--<span class="num">{{pasStuData.currentFlow}}</span>-->
          <!--<span class="label">今日累计客流</span>-->
        <!--</dc-col>-->
        <!--<dc-col class="card-data" span="6">-->
          <!--<span class="num">{{pasStuData.sameTermFlow}}</span>-->
          <!--<span class="label">上周同日客流</span>-->
        <!--</dc-col>-->
        <!--<dc-col class="card-data" span="6">-->
          <!--<span class="num">{{pasStuData.peopleAvgConsume}}</span>-->
          <!--<span class="label">人均消费</span>-->
        <!--</dc-col>-->
      <!--</dc-row>-->
    <!--</div>-->
  </div>
</template>
<script>
  import {initPie} from '@/common/echarts/pie';
  import api from '@/common/api/passenger';
  import {col, row} from '@/components/Flex';
  import cell from '@/components/cell';
  export default {
    components: {
      'dc-col': col,
      'dc-row': row,
      'dc-cell': cell
    },
    data () {
      return {
        midData: {text: '会员销售额', per: '0'},
        pieData: [{value: 0, name: '会员销售额'}, {value: 0, name: '非会员销售额'}],
        pasStuCrmData: {todayFlow: 0, peopleAvgConsume: 0, newMemberNum: 0, startCustomerNum: 0},
        pasStuData: {currentFlow: 0, sameTermFlow: 0, peopleAvgConsume: 0},
        ring: null
      };
    },
    mounted () {
      this.ring = initPie('#payRing');
      this.initPasStuCrmPie();
      this.getInfo();
    },
    activated () {
      this.dataInit();
      this.getInfo();
    },
    methods: {
      //数据初始化
      dataInit () {
        this.midData = {text: '会员销售额', per: '0'};
        this.pieData = [{value: 0, name: '会员销售额'}, {value: 0, name: '非会员销售额'}];
        this.pasStuCrmData = {todayFlow: 0, peopleAvgConsume: 0, newMemberNum: 0, startCustomerNum: 0};
        this.pasStuData = {currentFlow: 0, sameTermFlow: 0, peopleAvgConsume: 0};
      },
      getInfo () {
        let data = {
          timeFlag: -1
        };
        api.getCrmPassenger(data).then(res => {
          if (res) {
            this.pasStuCrmData = res;
            this.pieData[0].value = this.pasStuCrmData.memberSaleMny;
            this.pieData[1].value = this.pasStuCrmData.noMemberSaleMny;
            if (this.pieData[0].value > this.pieData[1].value) {
              this.midData.text = this.pieData[0].name;
              this.midData.per = this.pieData[0].value / (this.pieData[1].value + this.pieData[0].value) * 100;
              this.midData.per = this.midData.per.toFixed(2);
            }
            if (this.pieData[1].value > this.pieData[0].value) {
              this.midData.text = this.pieData[1].name;
              this.midData.per = this.pieData[1].value / (this.pieData[1].value + this.pieData[0].value) * 100;
              this.midData.per = this.midData.per.toFixed(2);
            }
            this.initPasStuCrmPie();
          }
        });
      },
      initPasStuCrmPie () {
        this.ring.hideLoading();
        this.ring.setOption({
          title: [{
            text: this.midData.text,
            textStyle: {
              width: 4,
              verticalAlign: 'top',
              color: '#999',
              fontWeight: 'normal',
              fontSize: 14
            },
            x: 'center',
            y: '50%'
          }, {
            text: this.midData.per + '%',
            textStyle: {
              verticalAlign: 'top',
              color: '#333',
              fontWeight: 'bold',
              fontSize: 20
            },
            x: 'center',
            y: '42%'
          }],
          legend: {
            data: ['会员销售额', '非会员销售额']
          },
          series: [{
            // 根据名字对应到相应的系列
            name: '消费方式',
            label: {
              normal: {
                formatter: '{b} \n {d}%'
              }
            },
            radius: ['40%', '55%'],
            data: this.pieData
          }]
        });
      }
    }
  };
</script>
<style lang="scss" scoped>
  @import "../../../assets/css/variable";
  .passenger-star {
    font-size: px2rem(32px);
    .startDetail {
      padding-top: px2rem(20px);
      padding-bottom: px2rem(20px);
    }
    .avatar {
      vertical-align: middle;
    }
    .num {
      line-height: 1;
    }
  }
  .crown {
    position: absolute;
    top: -12px;
    right: -10px;
    width: 24px;
    height:24px;
    background-size: 100%;
  }
</style>
